<template>
  <div class="home">
    <el-container>
      <el-header class="hoder">

        <ul>
          <li v-if="userName == ''">
            <span @click="login">登录</span>
            |<span @click="register">注册</span>
          </li>
          <li v-if="!userName == ''">
            <span>欢迎</span>
            |<span>
              <el-popconfirm title="你确定要退出吗？" @confirm="userout">
                <span slot="reference">{{ $store.state.userName }}</span>
              </el-popconfirm>
            </span>
          </li>
          <li @click="$router.push('/order')">我的订单</li>
          <li @click="$router.push('/Collection')">我的收藏</li>
          <li class="cart" @click="$router.push('/cat')">购物车({{ catlength }})</li>
        </ul>
      </el-header>
      <el-main class="icon">
        <img src="../assets/imgs/logo.png" alt="" @click="$router.push('/homePage')">
        <div class="tablist">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="首页" name="0"></el-tab-pane>
            <el-tab-pane label="全部商品" name="1"></el-tab-pane>
            <el-tab-pane label="关于我们" name="2"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="input">
          <el-input placeholder="请输入内容" v-model="inputValue" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </el-main>
      <div class="content">
        <router-view></router-view>
      </div>
      <el-main class="button">
        <div class="top">
          <img src="../assets/imgs/button.png" alt="">
        </div>
        <div class="center">
          <p>
            <img src="../assets/imgs/cat.png" alt="">
          </p>
          <p class="p"><span @click="$router.push('/homePage')">首页</span> |<span
              @click="$router.push('/goods')">全部商品</span> |<span @click="$router.push('/about')">关于我们</span> </p>
          <p>商城版权所有 © 2012-2021</p>
        </div>
      </el-main>
    </el-container>
    <!-- 登录 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="15%">
      <!-- ------------------ -->
      <el-form v-model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="userName">
          <el-input v-model="ruleForm.userName" autocomplete="off" placeholder="请输入帐号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="againPass" v-if="log == 0">
          <el-input v-model.number="ruleForm.againPass" placeholder="请在次输入密码"></el-input>
        </el-form-item>
      </el-form>
      <!-- ------------------ -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addlogin(ruleForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getseach, login, register } from "@/api/api.js"
import Conent from "../components/conent.vue";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      // if (value === '') {
      //   callback(new Error('请输入密码'));
      // } else {
      //   if (this.ruleForm.checkPass !== '') {
      //     this.$refs.ruleForm.validateField('checkPass');
      //   }
      //   callback();
      // }
    };
    var validatePass2 = (rule, value, callback) => {
      // if (value === '') {
      //   callback(new Error('请再次输入密码'));
      // } else if (value !== this.ruleForm.password) {
      //   callback(new Error('两次输入密码不一致!'));
      // } else {
      //   callback();
      // }
    };
    return {
      activeName: "0",
      //搜索框内容
      inputValue: "",
      dialogVisible: false,
      // 表单数据
      ruleForm: {},
      rules: {
        username: [
          { min: 3, max: 10, message: "用户名长度为3-10位" }
        ],
        password: [
          { validator: validatePass, trigger: "blur" }
        ],
        againPass: [
          { validator: validatePass2, trigger: "blur" }
        ],
      },
      log: 0,
      tabform: "",
      userName: this.$store.state.userName,
      user_id: this.$store.state.id,
      catlength: 0,
      page: {
        currentPage: 1,
        pageSize: 15
      },
    };
  },
  methods: {
    list() {
      this.catlength = localStorage.getItem('length')
      console.log(this.catlength);
    },
    async search() {
      // console.log(this.inputValue);s
      this.$store.commit('inputvalue',this.inputValue)
      // try {
      //   let obj = { currentPage: this.page.currentPage, pageSize: this.page.pageSize, search: this.inputValue }
      //   const {Product}= await getseach(obj)

        this.$router.push({
        path: '/goods'
      })
      //   console.log(Product);
      // } catch (error) {

      // }
     
    },
    userout() {
      localStorage.removeItem('vuex')
      this.$store.state.userName = ''
      this.$store.state.id = ''

    },
    //tab切换
    handleClick(value) {
      console.log(value.index);
      if (value.index == 1) {
        console.log('goods');
        this.$router.push('/goods')
      } else if (value.index == 2) {
        this.$router.push('/about')
      } else if (value.index == 0) {
        this.$router.push('/')
      }
    },
    //注册弹框
    register() {
      this.log = 0;
      this.ruleForm = {};
      this.dialogVisible = true;
    },
    //登录
    login() {
      this.log = 1;
      this.ruleForm = {};
      this.dialogVisible = true;
    },
    addlogin(ruleForm) {
      // console.log(ruleForm);
      if (this.log == 0) {
        register(ruleForm)
      }
      else if (this.log == 1) {
        login(ruleForm).then((res) => {
          console.log(res);
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success'
          });
          this.$store.commit("user", res.user.userName);
          this.$store.commit("id", res.user.user_id);
          this.userName = this.$store.state.userName;
        });
      }
      this.dialogVisible = false;
    },
  },
  computed: {
    title() {
      return this.log == 0 ? "注册" : "登录";
    }
  },
  created() {
    this.list()
  },
  components: { Conent }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;

  //头部模块
  .hoder {
    width: 100%;
    height: 40px !important;
    background: #3d3d3d;
    color: #ccc;

    ul {
      width: 430px;
      display: flex;
      height: 100%;
      float: right;
      margin-right: 300px;

      li {
        flex: 1;
        font-size: 16px;
        height: 100%;
        text-align: center;
        line-height: 40px;
      }

      .cart {
        background: #ff6700;
      }

      li:hover {
        cursor: pointer;
        color: #fff;
      }
    }
  }

  //标题模块
  .icon {
    width: 65%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0;
    justify-content: space-between;

    // box-sizing: border-box;
    .tablist {
      width: 300px;
      margin-top: 30px;
      margin-left: 50px;
    }

    .input {
      width: 400px;

    }
  }

  //内容模块
  .content {
    width: 65%;
    margin: 0 auto;
    height: calc(100% - 440px);
  }

  //底部模块
  .button {
    width: 100%;
    margin: 0 auto;
    height: 400px;
    background: #2f2f2f;
    color: #fff;

    .top {
      width: 100%;
      border-bottom: 1px solid rgb(97, 97, 97);

      img {
        display: block;
        margin: 0 auto;
      }
    }

    .center {
      width: 250px;
      height: 200px;
      margin: 15px auto;

      .p {
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin: 20px 0;
        font-size: 20px;
        color: #ccc;

        span {
          font-size: 16px;

        }

        span:hover {
          cursor: pointer;
          color: #fff;
        }
      }

      p {
        &:first-child {
          img {
            margin: 0 auto;
            display: block;
          }
        }

        &:last-child {
          text-align: center;
          color: #ccc;
          font-size: 16px;
        }
      }
    }
  }

}
</style>